import React, {
	Component
} from 'react';
import {
	connect
} from 'dva';
import {
	List,
	InputItem,
	WingBlank,
	Button,
	WhiteSpace,
	Toast
} from 'antd-mobile';

class RegisterPage extends Component {
	constructor(props) {
		super(props)
		this.state = {
			nickname: '',
			pwd: '',
			redopwd: '',
			phone: ''
		}
	}
	reg() {
		const nickname = this.state.nickname;
		const pwd = this.state.pwd;
		const redopwd = this.state.redopwd;
		const phone = this.state.phone.replace(/\s+/g,"");
		if (phone.length !== 11) {
			Toast.info('请输入正确的手机号', 2);
			return;
		}
		if (nickname === '') {
			Toast.info('昵称不得为空', 2);
			return;
		};
		if (pwd.length < 6) {
			Toast.info('密码不得少于6位', 2);
			return;
		}
		if (pwd !== redopwd) {
			Toast.info('两次输入密码不一致', 2);
			return;
		}
		this.props.dispatch({
			type: "user/register",
			payload: {
				nickname,
				pwd,
				phone
			}
		})
	}
	render() {
		return (
			<div> 
		        <WingBlank size = 'lg'>
		        <WhiteSpace md = 'xl' />
		        <List>
		          <InputItem
		            type="phone"
		            placeholder="您的手机号"
		            value={this.state.phone}
		            onChange={(value) => this.setState({ phone: value })}
		          >手机号</InputItem>
		          <InputItem
		            placeholder="取个昵称8"
		            value={ this.state.nickname }
		            onChange={(value) => this.setState({nickname: value})}
		          >昵称</InputItem>
		          <InputItem
		            type="password"
		            placeholder=""
		            value={this.state.pwd}
		            onChange={(value) => this.setState({ pwd: value })}
		          >密码</InputItem>
		          <InputItem
		            type="password"
		            placeholder=""
		            value={this.state.redopwd}
		            onChange={(value) => this.setState({ redopwd: value })}
		          >确认密码</InputItem>
		          </List>
		          <WhiteSpace md = 'xl' />
		          <Button 
		            type="primary"
		            onClick = {(e) => {
		                this.reg()
		            }}
		          >注册</Button>
		          </WingBlank>
	        </div>
		)
	}

}

function mapStateToProps({
	user
}) {
	return {
		user
	}
}
export default connect(mapStateToProps)(RegisterPage);